<template>
  <div id="editor"></div>
</template>

<script lang="ts" setup>
import Vditor from 'vditor'
import 'vditor/dist/index.css'
import { useConfigStore } from '@renderer/store/config'

/* ******************************通用属性/方法****************************** */
const useConfig = useConfigStore()

/* ******************************markdown属性/方法****************************** */
// 编辑器实例
const vd = ref<Vditor | null>(null)

// 编辑器主题监听
watch(
  () => useConfig.theme,
  (newVal) => {
    if (newVal == 'light') {
      // 亮色主题
      vd.value?.setTheme('classic', 'light', 'dark')
    } else {
      // 暗色主题
      vd.value?.setTheme('dark', 'dark', 'light')
    }
  },
  {
    immediate: true
  }
)

// 初始化编辑器
onMounted(() => {
  vd.value = new Vditor('editor', {
    // 编辑器宽度
    width: 'auto',
    // 编辑器高度
    height: 'calc(100vh - 60px - 24px)',
    // 主题
    theme: useConfig.theme == 'light' ? 'classic' : 'dark',
    // 工具栏
    toolbar: [
      // emoji 表情
      {
        name: 'emoji',
        tipPosition: 'e'
      },
      // 标题
      {
        name: 'headings',
        tipPosition: 'se'
      },
      // 加粗
      {
        name: 'bold',
        tipPosition: 'se'
      },
      // 斜体
      {
        name: 'italic',
        tipPosition: 'se'
      },
      // 删除线
      {
        name: 'strike',
        tipPosition: 'se'
      },
      // 链接
      {
        name: 'link',
        tipPosition: 'se'
      },
      // 分隔符
      '|',
      // 无序列表
      {
        name: 'list',
        tipPosition: 'se'
      },
      // 有序列表
      {
        name: 'ordered-list',
        tipPosition: 'se'
      },
      // 任务列表
      {
        name: 'check',
        tipPosition: 'se'
      },
      // 减少缩进(不显示)
      {
        name: 'outdent',
        tipPosition: 'se'
      },
      // 增加缩进(不显示)
      {
        name: 'indent',
        tipPosition: 'se'
      },
      // 引用
      {
        name: 'quote',
        tipPosition: 'se'
      },
      // 分隔线
      {
        name: 'line',
        tipPosition: 'se'
      },
      // 分隔符
      '|',
      // 代码
      {
        name: 'code',
        tipPosition: 'se'
      },
      // 行内代码
      {
        name: 'inline-code',
        tipPosition: 'se'
      },
      // 插入(不显示)
      // {
      //   name: 'insert-before',
      //   tipPosition: 'se'
      // },
      // 插入(不显示)
      // {
      //   name: 'insert-after',
      //   tipPosition: 'se'
      // },
      // 上传(需要额外配置)
      // {
      //   name: 'upload',
      //   tipPosition: 'se'
      // },
      // 记录(需要额外配置)
      // {
      //   name: 'record',
      //   tipPosition: 'se'
      // },
      // 表格
      {
        name: 'table',
        tipPosition: 'se'
      },
      // 撤销
      {
        name: 'undo',
        tipPosition: 'se'
      },
      // 重做
      {
        name: 'redo',
        tipPosition: 'se'
      },
      // 全屏
      // {
      //   name: 'fullscreen',
      //   tipPosition: 'se'
      // },
      // 分隔符
      '|',
      // 编辑模式
      {
        name: 'edit-mode',
        tipPosition: 'se'
      },
      // 预览
      {
        name: 'both',
        tipPosition: 'se'
      },
      // 导出
      {
        name: 'export',
        tipPosition: 'e'
      },
      // 分隔符
      '|',
      {
        name: 'code-theme',
        tipPosition: 'se'
      },
      {
        name: 'content-theme',
        tipPosition: 'se'
      },
      {
        name: 'more',
        toolbar: ['outline', 'devtools', 'info', 'help']
      }
    ],
    // 工具栏配置
    toolbarConfig: {
      // 隐藏
      hide: false,
      // 固定
      pin: true
    },
    // 模式 -- 所见即所得（wysiwyg）、即时渲染（ir）、分屏预览（sv）
    mode: 'sv',
    // 预览
    preview: {
      // 主题设置
      theme: {
        current: useConfig.theme == 'light' ? 'light' : 'dark'
      },
      // markdown预览设置
      markdown: {
        // 自动空格
        autoSpace: false,
        // 自动链接
        gfmAutoLink: true,
        // 自动校正术语
        fixTermTypo: false,
        // 插入目录
        toc: true,
        // 脚注
        footnotes: true,
        // wysiwyg 和 ir 模式下是否对代码块进行渲染
        codeBlockPreview: true,
        // wysiwyg 和 ir 模式下是否对数学公式进行渲染
        mathBlockPreview: true,
        // 段落开头空两个
        paragraphBeginningSpace: true,
        // 是否启用过滤 XSS
        sanitize: true,
        // 为列表添加 data-style 属性
        listStyle: false,
        // 链接相对路径前缀
        linkBase: '',
        // 链接强制前缀
        linkPrefix: '',
        // 启用 mark 标记
        mark: false
      },
      // 高亮设置
      hljs: {
        // 是否启用行号
        lineNumber: true,
        // 样式
        style: useConfig.theme == 'light' ? 'github-dark' : 'github'
      }
    },
    // 开启大纲模式
    outline: {
      // 初始化是否展现大纲
      enable: true,
      // 大纲位置
      position: 'left'
    }
  })
})
</script>

<style lang="scss" scoped></style>
